<template>
  <div class="shop-page">
    <!-- 头部搜索框 -->
    <el-row class="shop-headerbox">
      <el-col :span="14" :offset="5">
        <!-- 搜索框主体 -->
        <div class="shop-searchbox">
          <input type="text" placeholder="搜索商品" v-model="shopSearch" @keyup.enter="doSearch" />
          <button @click="doSearch">搜索</button>
        </div>
      </el-col>
    </el-row>
    <!-- 中间导航 -->
    <el-row class="shop-nav-container">
      <el-col :span="5">
        <!-- 左边盒子 -->
        <div class="left-box">
          <div class="left-box-title">
            &nbsp;&nbsp;&nbsp;<span style="color: #ffa500">分类</span>
          </div>
          <ul class="left-box-content">
            <li>
              <div>
                &nbsp;&nbsp; <i class="el-icon-star-on"></i>&nbsp;<a href="#"
                  >国家补贴</a
                ><span>&nbsp;/&nbsp;</span><a href="#">立减8.5折起</a>
              </div>
            </li>
            <li>
              <div>
                &nbsp;&nbsp; <i class="el-icon-mobile-phone"></i>&nbsp;<a
                  href="#"
                  >配件</a
                ><span>&nbsp;/&nbsp;</span><a href="#">手机</a
                ><span>&nbsp;/&nbsp;</span><a href="#">通信</a>
                <span>&nbsp;/&nbsp;</span><a href="#">数码</a>
                <span>&nbsp;/&nbsp;</span><a href="#">定制</a>
              </div>
            </li>
            <li>
              <div>
                &nbsp;&nbsp; <i class="el-icon-s-platform"></i>&nbsp;<a href="#"
                  >电脑</a
                ><span>&nbsp;/&nbsp;</span><a href="#">配件</a
                ><span>&nbsp;/&nbsp;</span><a href="#">办公</a>
                <span>&nbsp;/&nbsp;</span><a href="#">文具</a>
                <span>&nbsp;/&nbsp;</span><a href="#">商业</a>
              </div>
            </li>
            <li>
              <div>
                &nbsp;&nbsp; <i class="el-icon-house"></i>&nbsp;<a href="#" @click="goClass('tool')"
                  >工具</a
                ><span>&nbsp;/&nbsp;</span><a href="#">家装</a
                ><span>&nbsp;/&nbsp;</span><a href="#">家居</a>
                <span>&nbsp;/&nbsp;</span><a href="#">厨具</a>
                <span>&nbsp;/&nbsp;</span><a href="#">健康</a>
              </div>
            </li>
            <li>
              <div>
                &nbsp;&nbsp; <i class="el-icon-basketball"></i>&nbsp;<a href="#"  @click="goClass('daily')"
                  >日用</a
                ><span>&nbsp;/&nbsp;</span><a href="#">食品</a
                ><span>&nbsp;/&nbsp;</span><a href="#">运动</a>
                <span>&nbsp;/&nbsp;</span><a href="#">户外</a>
                <span>&nbsp;/&nbsp;</span><a href="#">个护</a>
              </div>
            </li>
            <li>
              <div>
                &nbsp;&nbsp; <i class="el-icon-coffee-cup"></i>&nbsp;<a href="#"
                  >箱包</a
                ><span>&nbsp;/&nbsp;</span><a href="#">汽车</a
                ><span>&nbsp;/&nbsp;</span><a href="#">珠宝</a>
                <span>&nbsp;/&nbsp;</span><a href="#">文玩</a>
                <span>&nbsp;/&nbsp;</span><a href="#">图书</a>
              </div>
            </li>
            <li>
              <div>
                &nbsp;&nbsp; <i class="el-icon-pie-chart"></i>&nbsp;<a href="#"
                  >女鞋</a
                ><span>&nbsp;/&nbsp;</span><a href="#">男鞋</a
                ><span>&nbsp;/&nbsp;</span><a href="#">内衣</a>
                <span>&nbsp;/&nbsp;</span><a href="#">配饰</a>
                <span>&nbsp;/&nbsp;</span><a href="#">手表</a>
              </div>
            </li>
            <li>
              <div>
                &nbsp;&nbsp; <i class="el-icon-pie-chart"></i>&nbsp;<a href="#"
                  >女装</a
                ><span>&nbsp;/&nbsp;</span><a href="#">酒类</a
                ><span>&nbsp;/&nbsp;</span><a href="#">健康</a>
                <span>&nbsp;/&nbsp;</span><a href="#">生鲜</a>
                <span>&nbsp;/&nbsp;</span><a href="#">水果</a>
              </div>
            </li>
            <li>
              <div>
                &nbsp;&nbsp; <i class="el-icon-pie-chart"></i>&nbsp;<a href="#"
                  >母婴</a
                ><span>&nbsp;/&nbsp;</span><a href="#">童装</a
                ><span>&nbsp;/&nbsp;</span><a href="#">宠物</a>
                <span>&nbsp;/&nbsp;</span><a href="#">玩具</a>
                <span>&nbsp;/&nbsp;</span><a href="#">奶粉</a>
              </div>
            </li>
          </ul>
        </div></el-col
      >
      <!-- 轮播图 -->
      <el-col :span="12" :offset="1"><OraCarouser></OraCarouser></el-col>
      <!-- 右边盒子 -->
      <el-col :span="5" :offset="1"
        ><div class="right-box">
          <div class="right-item item1">夏日大促</div>
          <div class="right-item item2">全场热销</div>
          <div class="right-item item3">会员专场</div>
        </div></el-col
      >
    </el-row>
    <OraLove></OraLove>
  </div>
</template>

<script>
import OraLove from "@/components/OraLove.vue";
import OraCarouser from "@/components/OraCarouser.vue";
export default {
  components: {
    OraLove: OraLove,
    OraCarouser: OraCarouser,
  },
  data() {
    return {
      shopSearch: "",
    };
  },
  methods: {
    //搜索商品
    async doSearch() {
      if (!this.shopSearch.trim()) {
        this.$message.warning("请输入搜索关键字！");
        return;
      }
      const res = await fetch("/data/goods.json");
      const goods = await res.json();
      const result = goods.filter((item) =>
        item.name.includes(this.shopSearch.trim())
      );
      this.$router.push({
        name: "search",
        query: {
          keyword: this.shopSearch,
          result: JSON.stringify(result),
        },
      });
    },
    goClass(gclass) {
    this.$router.push({
      name: "class",
      query: { gclass }
    });
  },
  },
};
</script>

<style scoped>
/* 商城页面 */
.shop-page {
  width: 88rem;
  margin: auto;
  background-color: #fff;
}

/* 商城页面头部 */
.shop-headerbox {
  height: 4rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* 头部搜索框 */
.shop-searchbox {
  /* background-color: rgb(0, 255, 13); */
  height: 4rem;
}

/* 搜索总盒子 */
.shop-searchbox {
  width: 100%;
  height: 3rem;
  border: #ffb188 solid;
  border-radius: 20px;
  background-color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* 搜索框 */
.shop-searchbox input {
  width: 85%;
  height: 80%;
  border: none;
  display: block;
  margin: auto;
  outline: none;
}

/* 搜索按钮 */
.shop-searchbox button {
  width: 9%;
  height: 100%;
  /* 改变手型 */
  cursor: pointer;
  background-color: #ffb188;
  border-top-right-radius: 17px;
  border-bottom-right-radius: 17px;
  border: none;
}

.shop-searchbox button:hover {
  background-color: #ffa500;
}

/* 中间导航 */
.shop-nav-container {
  /* margin-top: 1rem; */
  height: 18rem;
  display: flex;
  align-items: center;
  background: #f7f7f7;
}

/* 导航左边盒子样式 */
.left-box {
  background: #f7f7f7;
  border-radius: 10px;
  height: 250px;
}

/* 左边盒子span */
.left-box .left-box-title span {
  color: #1f1f1f;
  font-size: 16px;
  font-weight: 600;
  line-height: 32px;
  vertical-align: middle;
}
.left-box .left-box-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: space-around;
}
.left-box .left-box-content li div a {
  text-decoration: none;
  outline: none;
  color: #000;
  font-size: 15px;
}
.left-box .left-box-content li div a:hover {
  color: #ff5000;
  text-decoration: underline;
  transition: color 0.2s;
}

.right-box {
  width: 100%;
  height: 16rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.right-item {
  width: 80%;
  height: 30%;
  background-color: pink;
  text-align: center;
  align-content: center;
  color: #000;
  cursor: pointer;
  border-radius: 20px;
  font-size: 20px;
}

.item1 {
  background-color: #ffa854;
}

.item2 {
  background-color: #ffc0b7;
}

.item3 {
  background-color: #ffb188;
}
</style>